<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="common::commonHeader(~{::title})">
    <title th:text="#{pagination}">分页</title>
</head>
<body>
	<head th:replace="common::commonNav"></head>
<div class="container main">
		<table id="table1" data-classes="table table-hover "
			data-search="true" data-show-refresh="true" data-show-toggle="true"
			data-show-columns="true" data-toolbar="#toolbar"></table>
		<div id="toolbar">
			<div class="btn-group">
				<button class="btn btn-default">
					<i class="glyphicon glyphicon-plus"></i>
				</button>
				<button class="btn btn-default">
					<i class="glyphicon glyphicon-heart" id="heartBtn"></i>
				</button>
				<button class="btn btn-default">
					<i class="glyphicon glyphicon-trash"></i>
				</button>
			</div>
			<div class="form-group">
				<label class="control-label">性别：</label> <label class="radio-inline">
					<input type="radio" name="sex" value="男" /> 男
				</label> <label class="radio-inline"> <input type="radio" name="sex"
					value="女" /> 女
				</label>
			</div>
		</div>
	</div>
	<footer>
    <div class="container">
        © 2018 Foo Company<a href="#" class="back-to-top"> Back to top </a>
    </div>
    <script th:src="@{/webjars/jquery/2.1.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.2.0/js/bootstrap.min.js}"></script>
    <script th:src="@{/webjars/bootstrap-table/1.11.1/dist/bootstrap-table.min.js}"></script>
    <script th:src="@{/webjars/bootstrap-table/1.11.1/dist/locale/bootstrap-table-zh-CN.min.js}"></script>
    <script th:src="@{/js/app.js}"></script>
    
		<script type="text/javascript">
			$(function() {
				/*
				 * data-pagination 指定是否启用分页
				 * data-page-list 指定分页的页数据量数组 '[5,10]'
				 * data-side-pagination 指定分页是否是服务端(server)/客户端(client)
				 * 特别说明：
				 * 客户端，请求参数：
				 * search:文本框内容，在文本框内容改变是自动提交请求
				 * order: 排序方式
				 * sort:排序列名
				 * offset:划过条数
				 * limit:要获取的数据的条数
				 *
				 */
				var $table1 = $('#table1').bootstrapTable({
					columns : [ {
						field : 'sno',
						title : '学生编号',
						sortable : true
					}, {
						field : 'sname',
						title : '学生姓名'
					}, {
						field : 'ssex',
						title : '性别'
					}, {
						field : 'sbirthday',
						title : '生日'
					}, {
						field : 'classno',
						title : '课程编号'
					}, ],
					url : [[@{/page/data}]],
					pagination : true,
					sidePagination : 'server',
					pageList : [ 5, 10, 20, 50 ],
					queryParams : function(params) {
						params.name = '张三丰';
						//特别说明，返回的参数的值为空，则当前参数不会发送到服务器端
						//这种指定请求参数的方式和datatables控价类似
						params.sex = $('input[name="sex"]:checked').val();
						return params;
					}
				});
				//刷新方法
				$('#heartBtn').click(function() {
					$table1.bootstrapTable('refresh');
				});

			});
		</script>
	</footer>

</body>

</html>